/**
 * 学习目标：使用NavLink来实现高亮效果
 *
 */
import React, { Component } from 'react';

// 1. 导入NavLink替代Link组件，两者to属性的写法相同
// 2. active为默认的高亮class类名，通过写样式文件，并导入完成高亮效果
// 注意 NavLink默认的active类名，可以通过设置activeClassName属性覆盖掉
import { HashRouter as Router, Route, Link, NavLink } from 'react-router-dom';
import './index.css';

export default class App extends Component {
  render() {
    return (
      <Router>
        <div>App组件</div>
        <div>
          <NavLink to="/home" activeClassName="my-active">
            跳到Home
          </NavLink>
          <br />
          <NavLink to="/my" activeClassName="my-active">
            跳到我的音乐
          </NavLink>
          <br />
          <NavLink to="/friend" activeClassName="my-active">
            跳到朋友
          </NavLink>
        </div>
        <Route path="/home" component={Home} />
        <Route path="/my" component={MyMusic} />
        <Route path="/friend" component={Friend} />
      </Router>
    );
  }
}

class Home extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Home组件</h1>
      </div>
    );
  }
}

class MyMusic extends React.Component {
  render() {
    return (
      <div>
        <h1>我是MyMusic组件</h1>
      </div>
    );
  }
}

class Friend extends React.Component {
  render() {
    return (
      <div>
        <h1>我是Friend组件</h1>
      </div>
    );
  }
}
